/*
 *@description:订单页面
 *@Author:@reynold
 *@Date:2025-03-25 11:37:08
 *@Update:2025-03-25 11:37:08
 *@Version: V1.0.0
*/
<template>
  <div class="order_box">
    <van-nav-bar title="订单" />
    <van-tabs v-model="active" animated>
      <van-tab v-for="item in orderTips" :title="item.name" :key="item.id">
        <!-- <div v-if="item.id === 1">
          <van-panel v-for="order in orderList" :key="order.orderId" :title="order.name" :status="order.status">
            <div v-for="product in order.produts" :key="product.id">
              <van-card :num="product.num" :price="product.price" :desc="product.description" :title="product.name" :thumb="product.imgUrl" />
            </div>
            <template #footer>
              <van-button v-if="order.status === '待付款'" size="small" type="danger">付款</van-button>
              <van-button v-else size="small" type="danger">其他</van-button>
            </template>
          </van-panel>
        </div> -->
        <div>
          <div v-if="item.id === 1" v-for="order in orderList" :key="order.orderId">
            <van-collapse v-model="activeNames">
              <van-collapse-item :name="order.orderId">
                <template #title>
                  <div>{{ order.name }} <van-tag :type="order.status === '待付款' ? 'success' : 'danger'">{{ order.status
                  }}</van-tag></div>
                </template>
                <!-- 订单的内容 -->
                <div v-for="product in order.produts" :key="product.id">
                  <van-card :num="product.num" :price="product.price" :desc="product.description" :title="product.name"
                    :thumb="product.imgUrl" />
                </div>
                ￥ {{  order.totolPrice / 100 }}
                <van-button type="primary">去付款</van-button>
              </van-collapse-item>
            </van-collapse>
          </div>
          <div v-if="item.id === 2">
             待付款的订单
          </div>
          <div v-if="item.id === 3">
            待服务订单
          </div>
          <div v-if="item.id === 4">
            已完成订单
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderList: [],
      active: 0,
      activeNames: ['1'],
      orderTips: [
        { id: 1, name: "全部订单" },
        { id: 2, name: "待付款" },
        { id: 3, name: "待服务" },
        { id: 4, name: "已完成" }
      ]
    }
  },
  methods: {
    getOrderList(){
      let orderList = localStorage.getItem('mock_orderList')
      if(orderList){
        this.orderList = JSON.parse(orderList)
        console.log(this.orderList);
      }else {
        this.orderList = [{
          orderId: 1,
          name: '订单1',
          createTime: '2025-03-25 11:37:08',
          resTime: '2025-03-25 12:47:09',
          imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
          totolPrice: 200,
          status: '待付款',
          rating: '3.5小时',
          produts: [
            {
              id: 1,
              name: '产品1',
              num: 100,
              imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
              price: 100,
              duration: '4小时',
              categoryId: 1,
              rating: '3.5小时',
              bookCount: 800,
              description: '产品描述...包含了什么项目..',
            },
            {
              id: 2,
              name: '产品2',
              num: 100,
              imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
              price: 100,
              duration: '4小时',
              categoryId: 1,
              rating: '3.5小时',
              bookCount: 800,
              description: '产品描述...包含了什么项目..',
            }
          ]
        },
        {
          orderId: 2,
          name: '订单2',
          createTime: '2025-03-25 11:37:08',
          resTime: '2025-03-25 12:47:09',
          imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
          totolPrice: 200,
          status: '待服务',
          rating: '3.5小时',
          produts: [
            {
              id: 1,
              name: '产品1',
              num: 100,
              imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
              price: 100,
              duration: '4小时',
              categoryId: 1,
              rating: '3.5小时',
              bookCount: 800,
              description: '产品描述...包含了什么项目..',
            },
            {
              id: 2,
              name: '产品2',
              num: 100,
              imgUrl: 'https://pic.rmb.bdstatic.com/bjh/240521/news/282c28636ee072208c121ece57c7d70a3508.jpeg@h_1280',
              price: 100,
              duration: '4小时',
              categoryId: 1,
              rating: '3.5小时',
              bookCount: 800,
              description: '产品描述...包含了什么项目..',
            }
          ]
        },]
      }
    }
  },
  created(){
    this.getOrderList()
  }
}
</script>
<style scoped></style>